import React,{useEffect} from 'react';
import { Outlet } from "react-router-dom";
import {connect} from "react-redux";
import { Layout }from 'antd'
import introJs from 'intro.js'
import 'intro.js/minified/introjs.min.css'

import MenuCom from '@/layouts/components/Menu'
import LayoutHeadr from '@/layouts/components/Head'
import TabArea from '@/layouts/components/TabArea'

import {menuDataType,globalStateType} from '@/redux/interface/index'
// import steps from './steps'
import './index.less';
import {setIsGuid} from "@/redux/modules/global/action";


const { Content, Sider } = Layout;

function LayoutIndex(props:any) {
    let {collapse} = props.menuList
    const startGuid = () => {
        introJs().setOptions({
            nextLabel: "下一步", // 下一个的按钮文字
            prevLabel: "上一步", // 上一个按钮文字
            skipLabel: "跳过", // 跳过指引的按钮文字
            doneLabel: "完成", // 完成按钮的文字
            hidePrev: false, // 是否在第一步中隐藏“上一步”按钮;不隐藏，将呈现为一个禁用的按钮
            hideNext: false, // 是否在最后一步中隐藏“下一步”按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
            exitOnEsc: true, // 点击键盘的ESC按钮是否退出指引
            exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
            showStepNumbers: false, // 是否显示步骤编号
            disableInteraction: true, // 是否禁用高亮显示框内元素的交互
            showBullets: true, // 是否显示面板的指示点
            overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
            helperElementPadding: 10, // 选中的指引元素周围的填充距离
            showProgress: true, //进度条,
            steps: [
                {
                    element: document.querySelector("#id_Collapse_Area") as HTMLElement,
                    title: "缩放按钮",
                    intro: "这里可以缩放菜单",
                    position: "bottom"
                },
                {
                    element: document.querySelector("#id_fullscreen_Area") as HTMLElement ,
                    title: "全屏按钮",
                    intro: "这里可以全屏",
                    position: "bottom"
                },
                {
                    element:document.querySelector("#id_avatar_area") as HTMLElement ,
                    title: "个人信息",
                    intro: "这里可以设置个人信息",
                    position: "bottom"
                }
            ],
        })
            // 点击结束按钮后执行的事件
            .oncomplete(() => {
                props.setIsGuid(true)
            })
            // 点击跳过按钮后执行的事件
            .onexit(() => {
                props.setIsGuid(true)
            }).start();
    }
    useEffect(()=>{
        if(!props.isGuid)startGuid()
    },[props.isGuid])
    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider theme="light" collapsed={collapse}>
                <div className={['new_app_logo',collapse?"collapse_logo":null].join(' ')}>
                    NEWAPP
                </div>
                <MenuCom menuProps={'menuProps---'}/>
            </Sider>
            <Layout>
                <LayoutHeadr/>
                <TabArea/>
                <Content style={{ margin: '0 16px' }}>
                    <Outlet/>
                </Content>
            </Layout>
        </Layout>
    );
}

const mapStateToProps = (state:{menuList:menuDataType,global:globalStateType})=>{
    return{
        menuList:state.menuList,
        isGuid:state.global.isGuid,
    }
};
const mapDispatchToProps = { setIsGuid }
export default connect(mapStateToProps,mapDispatchToProps)(LayoutIndex);
